import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'

import toNative from '@/utils/toNative'

import type { CompanyInfoDto, PayWageInfoDto } from '@/api/company/types'

import Dialog from '@/components/dialog/Index'
import UploadFileComponent, { type ParamsDto } from '@/components/file/Upload'
import UploadImage from '@/assets/upload/icon-upload.png'
import type { ComponentPublicInstance } from 'vue'
import { Button, Image, type UploadFile } from 'ant-design-vue'
import styled from 'vue3-styled-components'

@Component
export class DialogUpload extends Render {
    @Prop({ default: false }) show!: boolean
    @Prop({ default: '上传发票' }) title?: string
    @Prop({ default: '.jpg,.png,.jepg' }) accept?: string

    showDialog = false

    @Emit('update:show')
    emitShow(val: boolean) {
        return val
    }

    // @Emit('update:file')
    // emitFile(file: File) {
    //     return file
    // }

    @Emit('confirm')
    handleConfirm() {
        return {
            file: this.file,
            close: this.onCancel
        }
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDialog = this.show
        if(!this.show) {
            this.onCancel()
        }
    }

    @Watch('showDialog', { immediate: true })
    handleWatchDialogShow() {
        this.emitShow(this.showDialog)
    }

    file = [] as UploadFile[]

    get params() {
        return {
            autoUpload: false,
            accept: this.accept,
            listType: 'text',
        } as ParamsDto
    }

    onCancel() {
        this.file = []
        this.showDialog = false
    }

    async onConfirm() {
        this.handleConfirm()
    }

    onChange(fileList: UploadFile[]) {
        this.file = fileList
    }
    
    uploadElement: typeof UploadFileComponent = styled(UploadFileComponent)`
        .ant-upload-select {
            display: block;
        }
    `

    render(data: ComponentPublicInstance) {
        return (
            <Dialog
                v-model:show={this.showDialog}
                title={this.title}
                width={528}
                destroyOnClose={true}
                v-slots={{
                    header: data?.$slots.header,
                    default: () => (
                        <>
                            {data?.$slots.filter?.()}
                            <this.uploadElement
                                v-model={this.file}
                                multiple={false}
                                params={this.params}
                                onChange={(fileList) => this.onChange(fileList)}
                                v-slots={{
                                    default: () => {
                                        return (
                                            <div class="w-full flex flex-col items-center bg-black-400 rounded-lg py-20px">
                                                <Image
                                                    class="!w-48px !h-48px mb-16px"
                                                    preview={false}
                                                    src={UploadImage}
                                                ></Image>
                                                <div>
                                                    {' '}
                                                请将文件拖到此处或
                                                    <span class="text-blue-100">点击上传</span>
                                                </div>
                                                {data?.$slots.default?.()}
                                            </div>
                                        )
                                    }
                                }}
                            />
                        </>
                    ),
                    footer: () => {
                        return (
                            <div class="flex justify-center">
                                <Button type="primary" onClick={this.onConfirm}>
                                    确定
                                </Button>
                            </div>
                        )
                    }
                }}
            ></Dialog>
        )
    }
}

export default toNative<
    { title?: string; accept?: string },
    { confirm: (data: {file: UploadFile[], close: () => void}) => void }
        >(DialogUpload)
